<template>
	<div id="app">
		<base-layout>
			<!-- <transition
				mode="out-in"
				:appear="true"
				name="app-transition"
				:duration="{ enter: 800, leave: 300 }"
				enter-active-class="animate__animated animate__rotateInDownLeft"
				leave-active-class="animate__animated animate__hinge"
			>
				<keep-alive :include="tabNames">
					<router-view :key="$route.fullPath" />
				</keep-alive>
			</transition> -->
			<transition name="fade-transform" mode="out-in" appear>
				<keep-alive :include="tabNames">
					<router-view :key="$route.fullPath" />
				</keep-alive>
			</transition>
			<!-- <router-view /> -->
		</base-layout>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import BaseLayout from '@/components/BaseLayout'
export default {
	name: 'app',
	components: { BaseLayout },
	computed: { ...mapState(['tabNames']) }
}
</script>

<style lang="scss">
@import '@/style/reset.scss';
@import '@/style/common.scss';
@import '@/style/global.scss';
@import '@/style/transition.scss';
#app {
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
		'微软雅黑', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #606266;
	background-color: $bg-color;
}
</style>
